/***
 * @Author:xxx
 * @Date:2020-09-23 20:54:02
 * @LastModifiedBy:xxx
 * @Last Modified time:2020-09-23 20:54:02
 */

import React , { Component } from 'react';
import './workshop-mgt.css';
import { Button, message, Input, Table, Modal,Breadcrumb  } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import LinkButton from '../../components/link-button/linkButton.jsx';
import { reqWorkUserSearchByName,reqWorkUserList,reqTransferWorkUser} from '../../api';
import AddWorkuserForm from '../../components/Modal/add-workuser-form';
import {setWorkshop,getWorkshop } from '../../utils/storageUtils';

const { Search } = Input;
const { confirm } = Modal;

class WorkshopUserMgt extends Component {

  state = {
    workUserList:[],
    visible: '0',
    loading: false,
  } 

  handleNameSearch = async(value) => {   // 按姓名模糊查找用户     xxxxxxxxxxxxxxx缺接口
    const user_name = value;
    const ws_id = getWorkshop().ws_id;
    const ws_pid = getWorkshop().ws_pid;
    console.log('姓名找工区用户参数',user_name,ws_id,ws_pid);
    const result = await reqWorkUserSearchByName(user_name,ws_id,ws_pid);
    console.log('姓名找工区用户',result);
    if(result.code === 200){
      const workUserList = result.data;
      this.setState({
        workUserList
      })
    }else{
      message.error(result.data);
    } 
  };

  initColumns = () => {
    this.columns = [
      { title: '姓名', dataIndex: 'user_name', key: 'user_name',
        sorter: {
          compare: (a,b)=>a.user_name.localeCompare(b.user_name),   
        },
      },
      { title: '电话', dataIndex: 'user_mobile', key: 'user_mobile'},
      { title: '邮箱', dataIndex: 'user_email', key: 'user_email'},
      { title: '备注', dataIndex: 'user_remark', key: 'user_remark'},
      {
        title: '操作',
        dataIndex: '',
        key: 'action',
        width: 80,
        render: (workUserInfo) => <LinkButton onClick={ () => this.showDeleteConfirm(workUserInfo) }>调出</LinkButton>,  
      },
    ];
  }

  //获取用户信息列表数据
  getWorkUserList = async(ws_id,ws_pid) => {
    //console.log("获取工区内用户参数",ws_id,ws_pid) 
    this.setState({loading:true});
    const result = await reqWorkUserList(ws_id,ws_pid); 
    console.log("获取工区内用户",result); 
    this.setState({loading: false});
    if(result.code === 200){
      const workUserList = result.data;  // 获取data数据
      this.setState({   // 更新状态
        workUserList 
      })
    }else{
      message.error(result.data);
    } 
  }

  addShow = () => {
    this.setState({
      visible: '1'
    })
  }
  addUserInfor = async() => {   // 将用户 调入工区（工区内添加用户） 
    this.setState({ visible: '0' })
    // 1、获取输入的数据
    var userTransferStandards = [];
    this.selectUser.forEach((item) => {
      var userItem = {
        org_id: item.org.org_id,
        user_mobile: item.user_mobile,  
      }
      userTransferStandards.push(userItem);
    })
    const ws_id = getWorkshop().ws_id;
    const ws_pid = getWorkshop().ws_pid;
    //console.log('调入工区',userTransferStandards,ws_id,ws_pid); 
    //2、发送请求 添加组织
    const result = await reqTransferWorkUser(true,userTransferStandards,ws_id,ws_pid);
    console.log('调入工区result',result); 
    if(result.code === 200){
     message.success("用户调入成功！");
      //5.重新显示列表
      this.getWorkUserList(ws_id,ws_pid);
    }else if(result.code === 400){
      message.error("存在不合法用户，无法调入！");
      this.getWorkUserList(ws_id,ws_pid);
    }else{
      message.error(result.data);
    }  
  }
  
  handleCancel = () => {
    this.setState({
      visible: '0'
    })
  }

  handleDeleteOnOk = async(workUserInfo) => {  // 删除onOk   
    this.setState({
      visible: '0'
    })
    const userTransferStandards = [{
      org_id: workUserInfo.org.org_id,
      user_mobile: workUserInfo.user_mobile
    }]
    const ws_id = getWorkshop().ws_id;
    const ws_pid = getWorkshop().ws_pid;
    //console.log("调出用户",userTransferStandards,ws_id,ws_pid);
    const result = await reqTransferWorkUser(false,userTransferStandards,ws_id,ws_pid);  
    console.log("调出用户result",result);
    if(result.code === 200){
      message.success("用户已调出部门！");
      this.getWorkUserList(ws_id,ws_pid);
    }   
   };

  showDeleteConfirm = (workUserInfo) => {   // 删除响应函数
    confirm({
      title: '您确定要调出该用户吗?',
      icon: <ExclamationCircleOutlined />,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => this.handleDeleteOnOk(workUserInfo)  
    })
 };

  componentWillMount() {
    this.initColumns();
    
  }
  componentDidMount() {
    if(this.props.location.state && this.props.location.state.workshop){
      setWorkshop(this.props.location.state.workshop);
    }else{
      getWorkshop();
    };
    const ws_id = getWorkshop().ws_id;
    const ws_pid = getWorkshop().ws_pid;
    
    this.getWorkUserList(ws_id,ws_pid);
  }
 
  render() {
    const { visible,loading,workUserList } = this.state;  
    let workshopNameLable = getWorkshop().ws_name;
    
    return (
      <div className='workshop-mgt-wrapper'>  
        <div className='workshop-mgt-header'>
          <div>
            <span className='workshop-header-search-label'>用户姓名：</span>
            <Search
              className='workshop-header-search workshopuser-search'
              placeholder="根据用户姓名搜索"
              enterButton="搜索"
              size="middle"
              onSearch={value => this.handleNameSearch(value)}
            />
            <Button type="primary" className='workshop-header-add' onClick={ this.addShow }>调入用户</Button>
          </div>
          <Breadcrumb separator=">" className="workshop-mgt-breadcrumb">
            <Breadcrumb.Item ><Link to="/workshop-mgt">部门管理</Link></Breadcrumb.Item>
            <Breadcrumb.Item >{workshopNameLable} 用户列表</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <div className='workshop-mgt-content'>
          <Table
            columns={this.columns}
            dataSource={workUserList}  
            size='middle'
            //pagination={{defaultPageSize: 13}}
            loading={loading}   
            pagination={false}
            locale = {{
              cancelSort:'点击取消排序',
              triggerAsc:'点击升序',
              triggerDesc:'点击降序'
            }}
          />
          <Modal
            title="调入用户"
            visible={visible === '1'}
            onOk={this.addUserInfor}
            onCancel={this.handleCancel}
            okText="确定"
            cancelText="取消"
            destroyOnClose={true}
          >
            <AddWorkuserForm setForm={(selectUser) => {this.selectUser = selectUser}}/>  
          </Modal>
        </div>
      </div>
    )
  }
}

export default WorkshopUserMgt; 